<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="4" :xs="24">

                <fileTrees @handleNodeClick="onTreeClick" :tableHeight="treeHeight" :isnoClick="isnoClick" :menuId="menuId">
                </fileTrees>
            </el-col>
            <!--档案盒数据-->
            <el-col :span="20" :xs="24" v-show="isShow">

<!--              <queryCriteriaList v-if="listFrom.length > 0" :showSearch="showSearch" :listFrom="listFrom"
                    @resetQuery="resetQuery" @handleQuery="handleQuery" ref="queryForm"></queryCriteriaList>-->
              <div class="head-container">
                <el-form :model="queryParams" ref="storeForm"  :inline="true" v-show="showSearchstore"
                         label-width="68px">
                <el-form-item label="盒号" prop="hehao">
                  <el-input v-model="queryParams.hehao"  id="hehao" placeholder="请输入盒号" clearable style="width: 240px" maxlength="30" @keyup.enter.native="handleQuery"/>
                </el-form-item>
                <el-form-item label="保管期限" prop="bgqx">
                  <el-select placeholder="请选择" v-model="queryParams.boxBgqx" id="boxBgqx">
                    <el-option v-for="item in dict.type.BGQX" :key="item.value" :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                  <el-form-item>
                    <el-button style="margin-left: 20px" type="primary" icon="el-icon-search"
                               @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                  </el-form-item>
             </el-form>
              </div>
                <el-row :gutter="10" class="mb8" ref="refbut" >
                    <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                        <el-button type="primary" plain icon="el-icon-takeaway-box"
                            @click="onClickTap('heneimulu')">盒内目录打印</el-button><!--菜单id_门类id_hnmldy-->
                    </el-col>

<!--                    <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                        <el-button type="primary" plain icon="el-icon-plus"
                            @click="onClickTap('heji')">盒脊打印</el-button>&lt;!&ndash;菜单id_门类id_hjdy&ndash;&gt;
                    </el-col>

                    <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                        <el-button type="primary" plain icon="el-icon-minus"
                            @click="onClickTap('fengmian')">封面打印</el-button>&lt;!&ndash;菜单id_门类id_fmdy&ndash;&gt;
                    </el-col>
                  <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                    <el-button type="primary" plain icon="el-icon-minus"
                               @click="onClickTap('beikaobiao')">备考表打印</el-button>&lt;!&ndash;菜单id_门类id_bkbdy&ndash;&gt;
                  </el-col>-->
<!--                  <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                    <el-button type="primary" plain icon="el-icon-minus"
                               @click="onClickTap('heneimulufengmian')">盒内目录封面打印</el-button>&lt;!&ndash;菜单id_门类id_bkbdy&ndash;&gt;
                  </el-col>
                  <el-col :span="1.5" v-show="(subStr == 'F' && categoryType == '0')">
                    <el-button type="primary" plain icon="el-icon-minus"
                               @click="onClickTap('biaoqian')">标签打印</el-button>&lt;!&ndash;菜单id_门类id_bkbdy&ndash;&gt;
                  </el-col>-->
<!--
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getlistPost"></right-toolbar>
-->
                </el-row>


              <el-table v-loading="loading" :data="helist" height="600" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" pprop="id"/>
                <!--<el-table-column label="操作" align="center" width="250">
                  <template slot-scope="scope">
                    <el-button  type="text" icon="el-icon-view" @click="handleView(scope.row)" v-hasPermi="['archive:warehouseManagement:warehouseInformation:store:detail']">盒内详情</el-button>
                  </template>
                </el-table-column>-->
                <el-table-column label="盒号" prop="hehao" align="center" :show-overflow-tooltip="true"  />
                <el-table-column label="保管期限" prop="bgqx" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="起始年度" prop="boxStnd" align="center" :show-overflow-tooltip="true" />

                <el-table-column label="终止年度" prop="boxEdnd" align="center" :show-overflow-tooltip="true" />

                <el-table-column label="件号（起）" prop="boxStnum" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="件号（止）" prop="boxEdnum" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="规格" prop="specName" align="center" :show-overflow-tooltip="true" />

              </el-table>
              <pagination v-show="total > 0" :total="total" :page.sync="pageNum"
                          :limit.sync="pageSize" @pagination="getlistPost" />
            </el-col>

            <el-col :span="20" :xs="24" v-show="!isShow" class="empty">
                <el-empty :image-size="200"></el-empty>
            </el-col>

        </el-row>


        <!--start  组件详情 -->
        <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose">
        </jianDetailsOpen>
        <!--end 组件详情 -->
        <!-- start 组卷\项目详情 -->
        <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
        <!-- end 组卷\项目详情 -->
        <hejidayinTap  v-if="hejidayinOpen" :hejidayinOpen="hejidayinOpen" :hejidata="hejidata"
                     @closeDelDialog="closeDelDialog" :daId="ids" :type="subStr"></hejidayinTap>

    </div>
</template>
<script>
import {getthbytreenodeHeaderList, getqueryfieldList,getmulufengmianshuju, getbiaoqian,geturl,getmulushuju,gethejidayin,getfenmiandayin} from "@/api/archive/warehouseManagement/archivezhuanghejilu.js";
import { getGroupTree } from "@/api/archive/archivesCategory.js"
import { listhe, getbkbdata } from '@/api/archive/warehouseManagement/archivezhuanghejilu.js'
import fileTrees from "@/components/fileTrees/index.vue"  //档案树
import treeHeight from '@/mixins/treeHeight'//计算左侧树的高度
import { getLastIndexOf } from "@/utils/index.js"
import tableList from "@/components/tableList/index.vue"
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情
import queryCriteriaList from "@/components/queryCriteriaList/index.vue"  //查询列表
import hejidayinTap from "@/views/archive/warehouseManagement/archivezhuanghejilu/hejidayin.vue"//盒脊

export default {
  /*1,点击门类，显示该门类的所有盒列表+搜索；双击查看盒内信息，双击条目查看档案详情
  * 2，勾选盒，点击打印（111盒内目录打印（只能勾选一条）
  *                   222盒脊打印，可以勾选多条
  *                    333封面打印  只能勾选一条
  *                     444备考表打印   只能勾选一条）*/
  archive_Dicts: ['BGQX'],
  mixins: [treeHeight], // 混入方法
    components: {
        fileTrees,
        tableList,
        jianDetailsOpen,
        juanDetailsOpen,
        queryCriteriaList,
        hejidayinTap
    },

    data() {
        return {
            loading: false,
            isnoClick: true, //防止树重复点击
            menuId: '',
            helist: [],
            isShow: false, //是否显示右侧数据 isShow:true,  //判断  著录项目内件按钮是否显示
            // 显示搜索条件
            showSearch: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                hehao:'',
                boxBgqx:'',
                categoryId:'',
                menuId:''
            },
          hejidata:undefined,
          pageNum: 1,
          pageSize: 10,
            heTotal: 0,
            // 显示搜索条件
            showSearchstore: true,
            total: 0,
            tableHeaderList: [], //table表头数据
            tableData: [],//table列表数据
            listFrom: [],//查詢列表字段
            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            hejidayinOpen:false,
            openInfo: { //件 卷  项目
                opens: false,
                categoryId: undefined,
                menuId: undefined,
                type: undefined
            },
            tableHeight: "",
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            subStr: '',
            categoryType: '',
            data111: [{"data":[{}]}]
        }
    },
    created() {
        this.menuId = this.$route.meta.menuId
    },
    methods: {
        //动态设置table的高度
        tableHeightData() {
            this.$nextTick(
                () => {
                    let h = document.documentElement.clientHeight
                    //     console.log(this.$refs.queryForm.$el.offsetHeight, this.$refs.refbut.$el.offsetHeight, "sdklfjklliuhaiorng")
                    h = h - 200
                    if (this.$refs.queryForm) { // 页面上如果有面包屑区域徐减去它的高度
                        h = h - this.$refs.queryForm.$el.offsetHeight
                    }

                    if (this.$refs.refbut) { // 页面上如果有分页区域徐减去它的高度
                        h = h - this.$refs.refbut.$el.offsetHeight
                    }
                    // console.log(h,"sdjfdklsjfkl")
                    this.tableHeight = h > 310 ? h : 310 // 根据自己项目定高度

                    return h
                }
            )

        },
        // 树节点单击事件
        onTreeClick(data) {
            var that = this;
            this.isnoClick = true;
            this.treeRowData = data;
            if (data.categoryId != null) {
                this.isShow = true
            } else {
                this.isShow = false
            }
            if (this.$refs.queryForm != undefined) {
                this.$refs.queryForm.queryParams = {};
            }
            if (data.nodeType == null || data.nodeType == "t" || data.nodeType == "f") {
                this.isnoClick = true;
                return false;

            }
            this.loading = true;
            // this.queryParams = data;
            // console.log(data, "+++++++++++++++++")
            this.queryParams.order = '';
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.queryParams.categoryId = data.categoryId;
            this.queryParams.menuId = data.menuId;
            this.queryParams.propertyName = data.propertyName;
            this.queryParams.propertyValue = data.propertyValue;
            this.queryParams.subTableName = data.sub_table_name;
            if (this.queryParams.subTableName != undefined) {
                this.subStr = getLastIndexOf(this.queryParams.subTableName);
                let stb = this.queryParams.subTableName;
                let stbArr = stb.split("_");
                this.categoryType = stbArr[stbArr.length - 3];
                that.$nextTick(res => {
                  this.getlistPost();

                })
            } else {
                this.getGroupTreePost(data.categoryId);
            }




        },
      //关闭著录 \件\ 组卷
      closeDelDialog() {
        this.hejidayinOpen=false;
      },
        //档案门类树门类根据categoryID回显
        getGroupTreePost(ID) {
            getGroupTree(ID).then(response => {
                console.log(response)
                if (response.data.type == "0") { //件
                    this.queryParams.subTableName = response.data.fileTableName;
                } else if (response.data.type == "1") { //卷
                    this.queryParams.subTableName = response.data.folderTableName;
                } else if (response.data.type == "3") { //项目
                    this.queryParams.subTableName = response.data.folderTableName;
                }
                this.subStr = getLastIndexOf(this.queryParams.subTableName);
                let stb = this.queryParams.subTableName;
                let stbArr = stb.split("_");
                this.categoryType = stbArr[stbArr.length - 3];
                this.getlistPost();

            });
        },






        /** 点击树节点,获取table数据*/
        getlistPost() {console.log("this.queryParams",this.queryParams)
            var that = this;
            this.loading = true;
            this.isnoClick=true
            listhe(this.queryParams).then(response => {
              //根据不同的门类获取档案盒列表

              this.helist = response.rows;
              for (let i = 0; i < response.rows.length; i++) {
                // 渲染表格数据
                for (let j = 0; j < this.dict.type.BGQX.length; j++) {
                  if(response.rows[i].bgqx == this.dict.type.BGQX[j].value){
                    this.helist[i].bgqx = this.dict.type.BGQX[j].label
                  }
                }
              }
              this.loading = false;
              console.log("resp111111111111111111111111111111onse",response,response.total)
              this.total = response.total;
              this.helist = response.rows;

            });
        },
        //是否选择数据
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length != 1;
        this.multiple = !selection.length;
        console.log(this.ids)
      },

        //双击列表进入详情页面
        celldblclick(row) {
            var level = "";
            var label = "";
            console.log(this.queryParams.subTableName,"_____________")
            if (getLastIndexOf(this.queryParams.subTableName) == "F") {  //F 件
                level = 0
                label = row.TITLE;
            } else if (getLastIndexOf(this.queryParams.subTableName) == "V") { //卷
                level = 1
                label = row.TITLE;
            } else { //项目
                level = 3
                label = row.TITLE;
            }

            this.celldbData = {
                id: row.ID,
                categoryId: this.queryParams.categoryId,
                menuId: this.queryParams.menuId,
                sub_table_name: this.queryParams.subTableName,
                label: label,
                level: level,
                ifSub_table_name: this.queryParams.subTableName,
                isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
                tableHeaderList: this.tableHeaderList
            }
            this.$nextTick(() => {
                if (this.subStr == "F") {  //F 进入件详情
                    this.jianDetailsOpen = true;
                } else { //进入卷详情 和项目详情
                    this.juanDetailsOpen = true
                }
            })

        },
          //关闭详情页面
          detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;


        },

        //排序
        sortChange(val) {
            this.queryParams.order = val;
            this.getlistPost();
        },

      /** 搜索按钮操作 */
      handleQuery() {
        this.getlistPost();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("storeForm");
        this.queryParams.hehao="";
        this.queryParams.boxBgqx="";
        this.handleQuery();
      },

        //打印
        onClickTap(type) {
            if (!this.multiple) {
                var text = ''
                var datalist = ['data'];
                 console.log(this.ids.toString(),"=====")
                if (type == 'heneimulu') {//===============盒内目录打印
                  name='hnmldy';
                  if(!this.single){
                    console.log(name, "++++")
                    getmulushuju({
                      categoryId: this.queryParams.categoryId,
                      boxId: this.ids.toString(),
                      type: name,
                      menuId: this.menuId

                    }).then(res => {
                      console.log("res",res)
                      geturl({
                        categoryId: this.queryParams.categoryId,
                        menuId: this.menuId,
                        type: name,
                        data: res.msg,
                        datalist: JSON.stringify(datalist)

                      }).then(res1 => {

                        if (res1.data.result == "fail") {
                          this.$message({ message: res1.data.msg, type: 'warning' })
                        } else {
                          window.open(res1.data.url);
                        }

                      })
                    })
                  }else{
                    this.$message({ message: '请选择一条档案数据哦', type: 'warning' })
                  }
                }  if (type == 'heneimulufengmian') {//===============盒内目录打印
                name='hnmlfmdy';
                if(!this.single){
                  console.log(name, "++++")
                  getmulufengmianshuju({
                    categoryId: this.queryParams.categoryId,
                    boxId: this.ids.toString(),
                    type: name,
                    menuId: this.menuId

                  }).then(res => {
                    console.log("res",res)
                    geturl({
                      categoryId: this.queryParams.categoryId,
                      menuId: this.menuId,
                      type: name,
                      data: res.msg,
                      datalist: JSON.stringify(datalist)

                    }).then(res1 => {

                      if (res1.data.result == "fail") {
                        this.$message({ message: res1.data.msg, type: 'warning' })
                      } else {
                        window.open(res1.data.url);
                      }

                    })
                  })
                }else{
                  this.$message({ message: '请选择一条档案数据哦', type: 'warning' })
                }
              } if (type == 'biaoqian') {//===============盒内目录打印
                name='bqdy';
                if(!this.single){
                  console.log(name, "++++")
                  getbiaoqian({
                    categoryId: this.queryParams.categoryId,
                    boxId: this.ids.toString(),
                    type: name,
                    menuId: this.menuId

                  }).then(res => {
                    console.log("res",res)
                    geturl({
                      categoryId: this.queryParams.categoryId,
                      menuId: this.menuId,
                      type: name,
                      data: res.msg,
                      datalist: JSON.stringify(datalist)

                    }).then(res1 => {

                      if (res1.data.result == "fail") {
                        this.$message({ message: res1.data.msg, type: 'warning' })
                      } else {
                        window.open(res1.data.url);
                      }

                    })
                  })
                }else{
                  this.$message({ message: '请选择一条档案数据哦', type: 'warning' })
                }
              }else if (type == 'heji') {//===================盒脊
                  name='hjdy';
                  console.log(name, "++++")
                  console.log(this.ids,"=====")
                  gethejidayin({
                    categoryId: this.queryParams.categoryId,
                    boxIds: this.ids,
                    type: name,
                    menuId: this.menuId,

                  }).then(res => {
                    console.log("res========================++++++++++++++",res)
                    this.hejidata=res.msg;
                    this.hejidayinOpen=true;
                   /* geturl({
                      categoryId: this.queryParams.categoryId,
                      menuId: this.menuId,
                      type: name,
                      data: res.msg,
                      datalist: JSON.stringify(datalist)

                    }).then(res1 => {

                      if (res1.data.result == "fail") {
                        this.$message({ message: res1.data.msg, type: 'warning' })
                      } else {
                        window.open(res1.data.url);
                      }

                    })*/
                  })

                } else if (type == 'fengmian') {//=========================封面
                  name='fmdy';
                  if(!this.single){
                    console.log(name, "++++")
                    getfenmiandayin({
                      categoryId: this.queryParams.categoryId,
                      boxId: this.ids.toString(),
                      type: name,
                      menuId: this.menuId,

                    }).then(res => {
                      console.log("res",res)
                      geturl({
                        categoryId: this.queryParams.categoryId,
                        menuId: this.menuId,
                        type: name,
                        data: res.msg,
                        datalist: JSON.stringify(datalist)

                      }).then(res1 => {

                        if (res1.data.result == "fail") {
                          this.$message({ message: res1.data.msg, type: 'warning' })
                        } else {
                          window.open(res1.data.url);
                        }

                      })
                    })
                  }else{
                    this.$message({ message: '请选择一条档案数据哦', type: 'warning' })
                  }
                }else if (type == 'beikaobiao') {//==============================备考表
                  name='bkbdy';
                  if(!this.single){
                    console.log(name, "++++")

                      geturl({
                        categoryId: this.queryParams.categoryId,
                        menuId: this.menuId,
                        type: name,
                        data: '',
                        datalist: ''
                      }).then(res1 => {

                        if (res1.data.result == "fail") {
                          this.$message({ message: res1.data.msg, type: 'warning' })
                        } else {
                          window.open(res1.data.url);
                        }

                      })

                  }else{
                    this.$message({ message: '请选择一条档案数据哦', type: 'warning' })
                  }
                }

            } else {
                this.$message({ message: '请选择要打印的数据哦', type: 'warning' })
            }
        },
    }
}
</script>
